<template>
  <div class="chart-item medium">
    <div class="chart-header">
      <h3>周转效率分析</h3>
      <div class="chart-tabs">
        <el-radio-group v-model="efficiencyType" size="small" @change="handleEfficiencyTypeChange">
          <el-radio-button label="turnover">周转率</el-radio-button>
          <el-radio-button label="days">周转天数</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="chart-content">
      <div ref="turnoverEfficiencyChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'TurnoverEfficiencyChart',
  data() {
    return {
      efficiencyType: 'turnover',
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.turnoverEfficiencyChart
        if (!chartDom) return
        
        this.chart = echarts.init(chartDom)
        this.updateChart()
      })
    },

    updateChart() {
      const turnoverData = [
        { name: '原材料', value: 8.5 },
        { name: '半成品', value: 6.2 },
        { name: '成品', value: 12.8 },
        { name: '辅料', value: 4.3 },
        { name: '包装材料', value: 15.6 }
      ]

      const daysData = [
        { name: '原材料', value: 43 },
        { name: '半成品', value: 59 },
        { name: '成品', value: 28 },
        { name: '辅料', value: 85 },
        { name: '包装材料', value: 23 }
      ]

      const currentData = this.efficiencyType === 'turnover' ? turnoverData : daysData
      const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de']

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const data = params[0]
            const unit = this.efficiencyType === 'turnover' ? '次/月' : '天'
            return `${data.name}<br/>${data.seriesName}: ${data.value}${unit}`
          }.bind(this)
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: currentData.map(item => item.name),
          axisLabel: {
            rotate: 0,
            interval: 0,
            fontSize: 11,
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          name: this.efficiencyType === 'turnover' ? '周转率(次/月)' : '周转天数(天)',
          nameTextStyle: {
            color: '#666',
            fontSize: 12
          },
          axisLabel: {
            color: '#666',
            fontSize: 11
          }
        },
        series: [
          {
            name: this.efficiencyType === 'turnover' ? '周转率' : '周转天数',
            type: 'bar',
            data: currentData.map((item, index) => ({
              value: item.value,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: colors[index] },
                  { offset: 1, color: colors[index] + '80' }
                ]),
                borderRadius: [4, 4, 0, 0]
              }
            })),
            barWidth: '60%',
            label: {
              show: true,
              position: 'top',
              color: '#666',
              fontSize: 11,
              formatter: function(params) {
                const unit = this.efficiencyType === 'turnover' ? '' : '天'
                return params.value + unit
              }.bind(this)
            }
          }
        ]
      }
      
      this.chart.setOption(option, true)
    },

    handleEfficiencyTypeChange(type) {
      this.efficiencyType = type
      this.updateChart()
      this.$emit('efficiency-type-change', type)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 组件特有样式 */
.chart-tabs {
  ::v-deep .el-radio-button__inner {
    padding: 6px 12px;
    font-size: 12px;
  }
}
</style>
